<!-- <template>

    <div class="fixed-center-container">
        <el-card>

            <div class="center-box bg-white rounded p-4">
                <h4 class="text-center">注册新账号</h4>
                <div class="row mt-4">
                    <div class="col-12">
                        <el-input placeholder="请输入手机号" prefix-icon="el-icon-mobile-phone" maxlength="11" v-model="Phone"
                            class="userInput" @input="handleInput">
                        </el-input>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-8">
                        <el-input placeholder="验证码" prefix-icon="el-icon-message" v-model="YZM" class="userInput">
                        </el-input>
                    </div>
                    <div class="col-4" style="margin: auto;">
                        
                        <el-button type="primary" :disabled="counting" @click="startCountdown">{{ counting ?
                            `${countdown} 秒` : '获取验证码' }}</el-button>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-12">
                        <el-input placeholder="请输入密码(8-16位)" prefix-icon="el-icon-lock" maxlength="16" v-model="PassWord"
                            class="userInput"  @input="handleInputPass" show-password>
                        </el-input>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-12">
                        <el-checkbox v-model="checked" @change="ChangeChecked">我已阅读
                            <a href="#" style="color: var(--a-color)">《用户协议》</a>
                            和
                            <a href="#" style="color: var(--a-color)">《信息安全责任书》</a>
                        </el-checkbox>
                    </div>
                </div>
                <div class="row text-center mt-4">
                    <div class="form-group ">
                        <el-button type="primary" style="width: 360px;">注册</el-button>
                    </div>
                </div>
                <div class="row FLexbetween">
                    <div class="col-6">
                        <router-link to="/zmLogin"><a href="#" class="bottRowtitle">已有帐号登录</a></router-link>
                    </div>
                </div>
            </div>
        </el-card>

    </div>
</template>

<script>
export default {
    name: 'ContactForm',
    data() {
        return {
            Phone: "",
            YZM:'',
            PassWord:'',
            counting: false,
            countdown: 60,
            checked:true,
        }
    },
    methods: {
        ChangeChecked(){
            console.log(this.checked )
        },
        handleInputPass() {
      this.PassWord = this.PassWord.replace(/[\u4e00-\u9fa5]/g, ''); // 过滤中文字符
    },
        handleInput() {
            this.Phone = this.Phone.replace(/\D/g, ''); // 只保留数字
        },
        startCountdown() {
            if (this.counting) return;

            this.counting = true;
            let timer = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--;
                } else {
                    this.counting = false;
                    this.countdown = 60;
                    clearInterval(timer);
                }
            }, 1000);
        }
    }
}
</script>
<style scoped>
:root {
  --a-color: #2468F2; /* 定义一个名为 --link-color 的 CSS 变量并设置为红色 */
  --bgcBtn-color:#2468F2;
}

.fixed-center-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* z-index: 1000; */
    /* 可根据需要调整z-index值，确保盒子位于其他元素之上 */
}

.center-box {
    background-color: #fff;
    border-radius: 0.25rem;
    max-width: 400px;
    /* 按照需求设置最大宽度，比如：max-width: 600px; */
    width: 100%;
    margin: auto;
}

/* 可选，针对移动设备的小屏幕，可以根据需求调整盒子在小屏幕上的显示方式 */
@media (max-width: 767px) {
    .center-box {
        max-width: 300px;

        /* width: 80%; */
        /* 或者其他适合移动设备的宽度 */
    }
}

::v-deep .el-input--prefix .el-input__inner {
    width: 360px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #CECFD3;
}

::v-deep .el-input__icon {
    line-height: 50px;
    font-size: 16px;
    margin-right: 10px;
}

::v-deep .el-button--primary {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2468F2;
}

@media (max-width: 767px) {
    ::v-deep .el-button--primary {
        width: 100px;
        font-size: 12px;
        ;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.yzmTitle {
    margin: 0 auto;
    color: #2468F2;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
}

.yzmTitle {
    margin: 0 auto;
    color: #2468F2;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
}

.bottRowtitle {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 12px;
    color: #666666;
}
</style> -->


<template>
	<div  class="LoginMaxboxs">
		<el-row>
			<el-col :span="24">
				<el-col :span="6" :xs="0" :sm="6" :md="6" :lg="6">
					<div class="LoginleBox">
						<p class="Loginle-p">锦锐科技</p>
						<p class="Loginle-p2">专业可信赖的云测试平台</p>
						<ul class="Loginle-ulli">
							<li class="li1">百万级全链路压力测试实时发压</li>
							<li class="li1">API管理、测试、监控全生命周期管理</li>
							<li class="li1">海量终端设备在线操控、调试</li>
							<li class="li1">私有化部署搭建私有后台、UI、终端测试平台</li>
							<li class="li1">行业测试专家提供多项专业测试服务</li>
						</ul>
					</div>
				</el-col>
				<el-col :span="18" :xs="24" :sm="18" :md="18" :lg="18">
					<div class="LoginriBox">
							<div class="loginform">
								<h5 class="logintitle">注册锦锐账号</h5>
								<el-input v-model="Phone" placeholder="请输入手机号" maxlength="11" style="margin: 50px 0 20px 0;" @input="handleInput"></el-input>
								<div class="yzmbox">
									<el-input v-model="YZM" placeholder="请输入验证码">
									</el-input>
									<el-button type="text" :disabled="counting" @click="startCountdown" class="hqyzmbut">{{ counting ?
									    `${countdown} 秒` : '获取验证码' }}</el-button>
								</div>
								<el-input placeholder="请输入密码(8-16位)" maxlength="16" v-model="PassWord"
								      @input="handleInputPass" show-password>
								</el-input>
								<!-- <p class="wangjimima"><span>忘记密码?</span></p> -->
								<el-button class="LoginBut" @click="gotoregister">注册</el-button>
								<p class="yhxieyi">登录即视为同意《用户协议》</p>
								<p class="logintype"><span>已有账号?</span><span @click="gotoregi" style="color: #2966FF;">点击登录</span></p>
							</div>
					</div>
					
				</el-col>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				Phone:'',
				YZM:'',
				PassWord:'',
				counting: false,
				countdown: 60,
				checked:true,
			}
		},
		methods: {
			gotoregi(){
				this.$router.push({
					path:'/zmLogin'
				}
					
				)
			},
			gotoregister(){
				this.$router.push({
					path:'/zmLogin'
				}
					
				)
			},
			startCountdown() {
			    if (this.counting) return;
			
			    this.counting = true;
			    let timer = setInterval(() => {
			        if (this.countdown > 0) {
			            this.countdown--;
			        } else {
			            this.counting = false;
			            this.countdown = 60;
			            clearInterval(timer);
			        }
			    }, 1000);
			},
			 handleInputPass() {
			      this.PassWord = this.PassWord.replace(/[\u4e00-\u9fa5]/g, ''); // 过滤中文字符
			    },
			        handleInput() {
			            this.Phone = this.Phone.replace(/\D/g, ''); // 只保留数字
			        },
		}
	}
</script>
<style scoped lang="scss">
	
	.LoginMaxboxs{
		 width: 100%;
		height: 100vh; 
	}
	.LoginleBox{
		width: 100%;
		height: 100vh;
		background-image: url('../../assets/images/banner/loginlebgc.png');
		background-size: 100% 100vh;
		overflow: hidden;
		padding: 0 0 0 15%;
		.Loginle-p{
			margin-top: 167px;
			opacity: 1;
			font-family: Source Han Sans;
			font-size: 36px;
			font-weight: 500;
			color: #FFFFFF;
		}
		.Loginle-p2{
			font-family: Source Han Sans;
			font-size: 24px;
			color: #FFFFFF;
		}
		.Loginle-ulli{
			margin-top: 50px;
			.li1{
				color: #fff;
			}
		}
	}
	.LoginriBox{
		width: 100%;
		height: 100vh;
		background-color: #fafafa;
		display: flex;
		align-items: center;
		justify-content: center;
		.loginform{
			// width: 480px;
			// height: 55%;
			border-radius: 20px;
			background-color: #fff;
			padding: 0 8%;
			.yzmbox{
				position: relative;
				margin-bottom: 20px;
			}
			.hqyzmbut{
				position: absolute;
				right:20px;
				top: 0;
				bottom: 0;
			}
			
			.logintitle{
				text-align: center;
				margin-top: 100px;
				font-size: 24px;
				color: #3d3d3d;
			}
			.wangjimima{
				text-align: right;
				margin: 20px 0;
				font-size: 12px;
				color: #7E7E7E;
			}
			.LoginBut{
				width: 100%;
				background-color: #0457F2;
				border-radius: 5px;
				color: #fff;
				margin: 50px 0 5px 0;
			}
			.yhxieyi{
				text-align: center;
				font-size: 12px;
				color: #7E7E7E;

			}
			.logintype{
				margin: 60px 0 40px 0;
				text-align: center;
				cursor: pointer;
			}
		}
	}
	::v-deep .el-input__inner{
		background-color: #f1f1f1;
		height: 47px;
		border-radius: 10px;
		border: none;
	}
</style>